<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>001-Quinn的第一次作业</title>
	<link rel="shortcut icon" href="{% static 'img/user.jpg' %}" />
	<link rel="stylesheet" type="text/css" href="{% static 'css/font-awesome.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static 'css/jquery.dataTables.min.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static 'css/index_a.css' %}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
{#	<script type="text/javascript" src="{% static 'js/jquery-1.8.2.min.js' %}"></script>#}
	{% for jsfile_name in script_list %}<script src="{{host}}/{{jsfile_name}}.js"></script>{% endfor %}


{#	<script type="text/javascript" src="{% static 'js/jquery.dataTables.min.js' %}"></script>#}
{#	<script type="text/javascript" src="{% static 'js/index.js' %}"></script>#}
</head>
<body>
	<!-- 顶部 -->
	<div class="c-top">
		<div class="c-top-logotitle">餐厅数据分析</div>
		<div class="c-top-nav">
			<div class="fa fa-home c-top-nav-home"></div>
			<div class="fa fa-angle-right c-top-nav-right">
				<span class="c-top-nav-text1"></span>
			</div>
			<div class="fa fa-angle-right c-top-nav-right">
				<span class="c-top-nav-text2"></span>
			</div>
		</div>
		<div class="c-top-user">
			<div class="fa fa-envelope-o c-top-user-email"></div>
			<div class="fa fa-calendar c-top-user-calendar"></div>
			<div class="c-top-user-number"></div>
			<div class="c-top-user-space"></div>
			<div class="c-top-user-name">主页
				<span class="fa fa-caret-down"></span>
			</div>
			<div class="c-top-user-pic">
{#				<img src="{% static 'img/user.jpg' %}" class="c-top-user-pic-img">#}
			</div>
		</div>
	</div>
	
	<!-- 主体部分 -->
	<div class="c-main">
		<div class="c-main-left" id="i_main_left">
			<div class="c-main-left-search">
				<input class="c-main-left-search-input" />
			</div>
			<div class="c-main-left-list">
				<div class="c-main-left-list-item c-active">总览
					<div class="c-arrow"></div>
				</div>
				<div class="c-main-left-list-item"><a href="{% url 'dining_ana:4' %}">每种商品的销售金额？</a></div>
				<div class="c-main-left-list-item"><a href="{% url 'dining_ana:5' %}">每种商品的销售个数？</a></div>
				<div class="c-main-left-list-item "><a href="{% url 'dining_ana:4' %}">餐厅的产品的种类及对应的商品配料的价格？</a>
{#					<div class="c-msginfo"></div>#}
				</div>
				<div class="c-main-left-list-item"><a href="{% url 'dining_ana:7' %}">每种商品销售金额在流水总额中所占的比例？</a></div>
				<div class="c-main-left-list-item"><a href="{% url  'dining_ana:8'%}">每个定单金额？</a></div>
                <div class="c-main-left-list-item"><a href="{% url  'dining_ana:10'%}">产品“Chicken Bowl”每种配料选择的次数？</a></div>
			</div>
		</div>
		
		<div class="c-main-right" id="i-main-right">
			<div class="c-main-right-mainpic">
				<div class="c-main-right-mainpic-condition">
{#                    <div id="4bd9875254bc420f8a2a81c8d0bb4d05" style="width:100%;height:400px;"></div>#}
{#					<div id="871918a7dab345c3b493e4337ccd3e30" style="width:960px;height:400px;"></div>#}
{#                    <script type="text/javascript" src="{% static 'js/the_order_amount.js' %}"></script>#}
                    {{ myechart3|safe }}
				</div>
			</div>
			<div class="c-main-right-tablepic">
				<div class="c-main-right-tablepic-table">
					<div class="c-main-right-tablepic-table-header" style="font-size: 22px">餐厅订餐表格</div>

					<div class="row">
						<table  class="table table-hover">
					        <thead>
					            <tr>
					                <th>订单号</th>
					                <th>商品数量</th>
					                <th>商品名称</th>
					                <th>商品配料</th>
					                <th>单价</th>
					            </tr>
					        </thead>
					        <tbody>
					            <tr>
					                <td>1</td><td>1</td>
					                <td>Chips and Fresh Tomato Salsa</td><td></td>
					                <td>$2.39</td>
					            </tr>
					            <tr>
					                <td>1</td><td>1</td>
					                <td>Nantucket Nectar</td><td>[Apple]</td>
					                <td>$3.39</td>
					            </tr>
					            <tr>
					                <td>1</td><td>1</td>
					                <td>Chips and Fresh Tomato Salsa</td><td></td>
					                <td>$2.39</td>
					            </tr>
					            <tr>
					                <td>1</td><td>1</td>
					                <td>Nantucket Nectar</td><td>[Apple]</td>
					                <td>$3.39</td>
					            </tr>
                                 <tr>
					                <td>1</td><td>1</td>
					                <td>Chips and Fresh Tomato Salsa</td><td></td>
					                <td>$2.39</td>
					            </tr>
					            <tr>
					                <td>1</td><td>1</td>
					                <td>Nantucket Nectar</td><td>[Apple]</td>
					                <td>$3.39</td>
					            </tr>
					             <tr>
					                <td>1</td><td>1</td>
					                <td>Chips and Fresh Tomato Salsa</td><td></td>
					                <td>$2.39</td>
					            </tr>
					        </tbody>
					    </table>
				    </div>
				</div>
				<div class="c-main-right-tablepic-pic">
					<div class="c-main-right-tablepic-header" style="font-size: 22px">销售金额在流水总额中所占的比例</div>
{#					<div id="d37e91d3e1004aa1bc462460d95be69c" style="width:600px;height:300px;"></div>#}
{#                    <script type="text/javascript" src="{% static 'js/bingtu.js' %}"></script>#}
                        {{ myechart_pie1|safe}}
				</div>
			</div>
			<div class="c-main-right-sec">
				<div class="c-main-right-secpic-header"></div>
				<div id="i-secpic" class="c-main-right-secpic"></div>
			</div>

			<div class="c-main-right-comment">
				<div class="c-main-right-comment-list">
					<div class="c-main-right-comment-header" style="font-family: 微软雅黑;font-weight: bold;font-size: 22px;padding: 20px 0px 10px 4px;border-bottom: 1px #ccc solid;">
						每种商品的销售金额
					</div>
                    {{ myechart_2|safe }}
                    <div class="c-main-right-comment-header" style="font-family: 微软雅黑;font-weight: bold;font-size:22px;padding: 20px 0px 10px 4px;border-bottom: 1px #ccc solid;">
						每种商品的销售个数
					</div>
					{{ myechart|safe }}
                    <div class="row">
						<table  class="table table-hover">
                            <thead>
                                <tr>
                                    <td>这段时间内餐厅的销售流水总额:</td>
                                    <td>这段时间内销售个数最多的商品:</td>
                                    <td>这段时间内销售金额最多的商品:</td>
                                </tr>
                            </thead>
                                <tr>
                                    {% for foo in info %}
                                        <td>{{ foo }}</td>
                                    {% endfor %}
                                </tr>
                        </table>
                    </div>
				</div>


				<div class="c-main-right-count">
					<div class="c-main-right-count-header" style="font-family: 微软雅黑;font-weight: bold;font-size: 22px;padding: 20px 0px 10px 4px;border-bottom: 1px #ccc solid;">
						Chicken Bowl”每种配料选择的次数比例:
					</div>
                    {{ myechart_pie2|safe }}

                    <div class="c-main-right-count-header" style="font-family: 微软雅黑;font-weight: bold;font-size: 22px;padding: 20px 0px 10px 4px;border-bottom: 1px #ccc solid;">
						餐厅的产品的种类及对应的商品配料的价格
					</div>
					<div class="c-main-right-count-title">
						<div class="c-avg-column1">种类</div>
						<div class="c-avg-column2">配料</div>
						<div class="c-avg-column3">价格</div>
						<div class="c-avg-column4"></div>
					</div>
					<div class="c-main-right-count-item-no">
						<div class="c-avg-column1">*******</div>
						<div class="c-avg-column2">******</div>
						<div class="c-avg-column3">**</div>
						<div class="c-avg-column4"></div>
					</div>

					<div class="c-main-right-count-item-no">
						<div class="c-avg-column1">*******</div>
						<div class="c-avg-column2">******</div>
						<div class="c-avg-column3">**</div>
						<div class="c-avg-column4"></div>
					</div>
					<div class="c-main-right-count-item-no">
						<div class="c-avg-column1">*******</div>
						<div class="c-avg-column2">******</div>
						<div class="c-avg-column3">**</div>
						<div class="c-avg-column4"></div>
					</div>
					<div class="c-main-right-count-item-no">
						<div class="c-avg-column1">*******</div>
						<div class="c-avg-column2">******</div>
						<div class="c-avg-column3">**</div>
						<div class="c-avg-column4"></div>
					</div>

					<div class="c-main-right-count-item-no">
						<div class="c-avg-column1">*******</div>
						<div class="c-avg-column2">******</div>
						<div class="c-avg-column3">**</div>
						<div class="c-avg-column4"></div>
					</div>
					<div class="c-main-right-count-item-no">
						<div class="c-avg-column1">*******</div>
						<div class="c-avg-column2">******</div>
						<div class="c-avg-column3">**</div>
						<div class="c-avg-column4"></div>
					</div>
					<div class="c-main-right-count-item-no">
						<div class="c-avg-column1">*******</div>
						<div class="c-avg-column2">******</div>
						<div class="c-avg-column3">**</div>
						<div class="c-avg-column4"></div>
					</div>

					<div class="c-main-right-count-item-no">
						<div class="c-avg-column1">*******</div>
						<div class="c-avg-column2">******</div>
						<div class="c-avg-column3">**</div>
						<div class="c-avg-column4"></div>
					</div>
					<div class="c-main-right-count-item-no">
						<div class="c-avg-column1">*******</div>
						<div class="c-avg-column2">******</div>
						<div class="c-avg-column3">**</div>
						<div class="c-avg-column4"></div>
					</div>
				</div>
			</div>
			
		</div>
	</div>
	<!-- 尾部 -->
	<div class="c-foot"></div>
</body>
</html>